<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script>
	$(document).ready(
			function() {
				/* Set page style */
				$("#main").addClass("ui-widget");

				var delDisplayDialog = new ESLserverDialogObj(
						"#del-dialog-confirm", "#delESLButton",
						"/eslserver/DeleteESLAction.do");
				delDisplayDialog.buildDialog();
				delDisplayDialog.addDialogFunctions();

				var pushDisplayDialog = new ESLserverDialogObj(
						"#push-dialog-confirm", "#pushDisplayButton",
						"/eslserver/PushESLDisplayAction.do");
				pushDisplayDialog.buildDialog();
				pushDisplayDialog.addDialogFunctions();

				/*Draw table*/
				var aoColumnDefs = [{"bSortable": false, "aTargets": [ 0 ]}, 
				                   	{"bSortable": false,
									 "fnRender": function(oObj) {
										 return ("<img src='" + oObj.aData[5] + "' />")
										 }, "aTargets": [ 5 ]}];
				loadTemplate("#allList",
						"/eslserver/template/ESLTableTemplate.jsp",
						"#allListTemplate", "checkboxAll");
				loadTableData("#allList", "#allListTemplate",
						"/eslserver/LoadAllESLs.do","ESLInfo.jsp","eslID",aoColumnDefs);

				$("#addESL").click(function() {
					window.location.replace("ESLInfo.jsp");
				});

			});
</script>

</head>
<body class="formBody">
	<form id="main">
		<div class="welcomeInfo">
			<table>
				<tr>
					<td><img id="sipixIcon" src="./images/sipix-logo.jpg"></img></td>
					<td>Welcome</td>
					<td class="message1"><c:out
							value="to Sipix ESL GUI Sever" /></td>
					<td>(</td>
					<td class="message1"><c:out value="Prototype V1.0" /></td>
					<td>)</td>
				</tr>
			</table>
		</div>
		<div style="clear: both;"></div>
		<fieldset id="eslMgmtFieldset" class="mainFieldSet">
			<legend class="mainLegend">Please use ESL table below to
				configure ESL and push image</legend>
			<fieldset class="subFieldSet">
				<legend class="subLegend">All ESLs</legend>
				<div>
					<img class="actionIcon" id="addESL" class="add"
						src="./images/add.png"></img>&nbsp;&nbsp; <img class="actionIcon"
						id="delESLButton" src="./images/del.png"></img>&nbsp;&nbsp; <img
						class="actionIcon" id="pushDisplayButton" src="./images/push.png"></img>
				</div>
				<div id="allList"></div>
			</fieldset>
		</fieldset>
	</form>
	<div id="del-dialog-confirm" title="Delete ESLs">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you really want
			to delete ESL(s)?
		</p>
	</div>
	<div id="push-dialog-confirm" title="push ESLs">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you really want
			to push ESL(s) display setting?
		</p>
	</div>
</body>
</html>